<template>
	<div class="web-detail">
		<div class="course-infos">
			<div class="course-infobox">
				<div class="course-path">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/webMain' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item>课程详情</el-breadcrumb-item>
					</el-breadcrumb>
					<div class="collect-btn">
						<i class="el-icon-star-off"></i>收藏
					</div>
				</div>
				<div class="course-title">{{ detail.title }}</div>
				<div class="static-box">
					<div class="static-left">
						<div class="static-item">
							<span class="meta">时长</span>
							<span class="meta-value">{{ detail.videoTime }}</span>
						</div>
					</div>
					<div class="static-right">
						<div class="static-btns" v-if="detail.price > 0 || isBuy === false">
							<div class="btn-buy prev" @click="handlePay(detail)">立即购买</div>
							<div class="btn-cart next" @click="handleAddShopCart(detail)">加购物车</div>
						</div>
						<div class="static-btns" v-else>
							<div class="btn-view" @click="handleVideoView({})">去学习</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="course-menu-wrap">
			<div class="course-menu">
				<div class="course-menu-item" :class="[activeMenu == '1' ? 'active' : '']" @click="handleMenuChange('1')">课程介绍</div>
				<div class="course-menu-item" :class="[activeMenu == '2' ? 'active' : '']" @click="handleMenuChange('2')">章节目录</div>
			</div>
		</div>
		<div class="course-content">
			<div class="course-intro" v-show="activeMenu == '1'">
				{{ detail.description }}
			</div>
			<div class="chapter-box" v-show="activeMenu == '2'">
				<div class="chapter" v-for="item in chapterList" :key="item.id">
					<div class="chapter-bd">
						<div class="name-box">
							<div class="name-left">
								<div class="name">{{ item.title}}</div>
								<div class="watch-free" v-if="item.free">试看</div>
							</div>
							<div class="chapter-num">
								{{ item.mediaList.length }}节|{{ item.time }}
							</div>
						</div>
						<div class="desc">{{ item.description }}</div>
						<div class="media-list-box">
							<div class="media-item" v-for="media in item.mediaList" :key="media.id"
							@click="handleVideoView(media)">
								<div class="media-left">
									<i class="el-icon-video-camera-solid"></i>
									<div class="type-text">视频: </div>
									<div class="title-info">{{ media.name}}({{media.time}})</div>
								</div>
								<div class="watch-free-btn" v-if="media.free">试看</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 视频弹框 -->
		<el-dialog
		title="视频观看"
		:visible.sync="dialog.show"
		width="30%"
		>
		<div>这是一段信息</div>
		</el-dialog>
	</div>
</template>

<script>
import user from '@/store/modules/user'
import { getCourse,getChapterVideos,addCart, listCoursePay } from '@/api/web/index'
export default {
	name: 'WebDetail',
	data() { 
		return {
			//选择菜单
			activeMenu: '1',
			//课程详情
			detail: {},
			//课程章节目录
			chapterList: [],
			//视频弹框
			dialog: {
				show: false
			},
			//是否已购买
			isBuy: false
		}
	},
	mounted() { 
		this.queryDetail();
		this.queryCourseChapters();
	},
	methods: {
		/**
		 * 查询课程详情
		 */
		async queryDetail() { 
			let res = await getCourse(this.$route.query.id)
			if (res.code == 200) { 
				this.detail = res.data;
				this.queryCourseBuy();
			}
		},
		/**
		 * 查询课程章节目录
		 */
		async queryCourseChapters() { 
			let res = await getChapterVideos(this.$route.query.id)
			if (res.code == 200) { 
				this.chapterList = res.data;
			}	
		},
		/**
		 * 菜单切换
		 * @param index 
		 */
		handleMenuChange(index) { 
			this.activeMenu = index;
		},
		/**
		 * 立即购买
		 */
		handlePay(data) {
			data['cartId'] = new Date().getTime();
			data['courseId'] = data.id;
			localStorage.setItem('shopList', JSON.stringify([data]));
			localStorage.setItem('shopTotal', data.price)
			this.$router.push('/order');
		},
		/**
		 * 加入购物车并跳转页面
		 */
		async handleAddShopCart(item) { 
			let res = await addCart({
				userId: user.state.id,
				courseId: item.id,
			});
			if (res.code == 200) {
				this.$confirm('添加购物车成功', '提示', {
					confirmButtonText: '去购物车结算',
					cancelButtonText: '继续逛逛',
					type: 'success',
					showClose: false
				}).then(() => {
					this.$router.push('/shopCart');
				}).catch(() => {
					console.log('继续逛逛')     
				});
			} else { 
				this.$message({
					message: '加入购物车失败',
					type: 'error'
				})
			}
		},
		/**
		 * 查询已购买课程列表
		 */
		async queryCourseBuy() {
			let res = await listCoursePay({
				userId: user.state.id
			});
			if (res.code == 200) { 
				if (res.rows.length > 0) {
					this.isBuy = false;
					res.rows.forEach(item => {
						if (item.courseId == this.detail.id) { 
							this.isBuy = true;
						}
					})
				} else { 
					this.isBuy = false;
				}
			}
		},
		/**
		 * 观看视频
		 * @param media 
		 */
		handleVideoView(media) {
			if (this.isBuy == false) {
				this.$message({
					message: '请购买后观看！',
					type: 'warning'
				})
			} else { 
				this.$router.push({
					path: '/videoView',
					query: {
						courseId: this.$route.query.id,
						mediaId: media.id ? media.id : ''
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.web-detail {
	width: 100%;
	.course-infos {
		width: 100%;
		height: 200px;
		background-color: #172a34;
		.course-infobox {
			width: 1230px;
			height: 100%;
			margin: 0 auto;
			.course-path {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: rgba(255,255,255,.5);
				padding-top: 16px;
				padding-bottom: 24px;
				line-height: 24px;
				font-size: 12px;
				.collect-btn {
					cursor: pointer;
					> i {
						margin-right: 4px;
					}
				}
			}
			.course-title {
				font-size: 30px;
				color: #fff;
			}
			.static-box {
				width: 100%;
				height: 48px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			.static-left {
				display: flex;
				flex-direction: row;
				align-items: center;
				.static-item {
					color: #fff;
					font-size: 14px;
					.meta {
						margin-right: 16px;
					}
				}
			}
			.static-right {
				.static-btns {
					display: flex;
					cursor: pointer;
					> div {
						width: 120px;
						height: 54px;
						text-align: center;
						font-size: 16px;
						color: #fff;
						line-height: 54px;
						font-weight: 700;
						&.prev {
							margin-left: 15px;
							border-radius: 24px 0 0 24px;
							background: rgba(240, 20, 20, .2);
							color: #f20d0d;
						}
						&.next {
							border-radius: 0 24px 24px 0;
							background: #f01414;
							color: #fff;
							margin-left: 0;
						}
						&.btn-view {
							background: #f01414;
							color: #fff;
							border-radius: 24px;
						}
					}
				}
			}
		}
	}
	.course-menu-wrap {
		width: 100%;
		height: 68px;
		line-height: 68px;
		background: #fff;
		box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
		.course-menu {
			width: 1230px;
			height: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			.course-menu-item {
				color: #1c1f21;
				font-weight: 600;
				margin-right: 50px;
				cursor: pointer;
				&.active {
					color: #97c225;
					border-bottom: 3px solid #97c225;
				}
			}
		}
	}
	.course-content {
		width: 1230px;
		margin: 0 auto;
		padding-top: 30px;
		.course-intro {
			margin-bottom: 8px;
			margin-top: 30px;
			padding: 24px 32px 32px;
			background: #fff;
			box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .1);
			border-radius: 12px;
			line-height: 28px;
			white-space: pre-line;
		}
	}
	.chapter-box {
		width: 100%;
		border-top: 1px dashed rgba(28, 31, 33, .1);
		.chapter {
			width: 100%;
			padding: 24px 0 24px 0;
			border-bottom: 1px solid rgba(28, 31, 33, .1);
		}
		.chapter-bd {
			width: 100%;
			.name-box {
				width: 100%;
				display: flex;
				line-height: 24px;
				margin-bottom: 8px;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.name-left {
					display: flex;
					flex-direction: row;
					.name {
						font-weight: 700;
						font-size: 16px;
						color: #1c1f21;
					}
				}
				.chapter-num {
					font-size: 12px;
					color: #93999f;
					line-height: 24px;
					font-weight: 400;
				}
			}
			.desc {
				margin-bottom: 8px;
				line-height: 24px;
				font-size: 14px;
				color: #676767;
			}
			.media-list-box {
				width: 100%;
				.media-item {
					width: 100%;
					height: 48px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					line-height: 48px;
					transition: all .2s ease;
					&:hover {
						background-color: #f7fee3;
					}
					.media-left {
						display: flex;
						flex-direction: row;
						align-items: center;
						> i {
							margin-right: 5px;
						}
						.type-text {
							font-size: 14px;
							color: #1c1f21;
							line-height: 24px;
							font-weight: 700;
							margin-right: 5px;
						}
						.title-info {
							max-width: 600px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							vertical-align: middle;
							color: #1c1f21;
							cursor: pointer;
						}
					}
					.watch-free-btn {
						padding: 0 16px;
						font-size: 12px;
						background: rgba(242, 13, 13, .1);
						border-radius: 12px;
						color: #f20d0d;
						font-weight: 700;
						transition: all .2s ease-in-out;
						cursor: pointer;
						&:hover {
							color: #fff;
    						background: #f20d0d;
						}
					}
				}
			}
			.watch-free {
				margin-left: 20px;
				padding: 2px 12px;
				font-size: 14px;
				background: rgba(242, 13, 13, .1);
				border-radius: 12px;
				color: #f20d0d;
				font-weight: 700;
			}
		}
	}
}
::v-deep .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
	color: rgba(255,255,255,.5);
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner, 
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, 
.el-breadcrumb__item:last-child .el-breadcrumb__inner a, 
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
	color: rgba(255,255,255,.5);
}
</style>